import { followedUser, deleteFollowed } from '../../../api/user'
import { useState } from 'react'
import { Button, Toast } from 'react-vant'
import styles from './item.module.css'

export default (props) => {
    console.log(styles);

    const { fans_count, id, name, mutual_follow, photo } = props.data
    const [is, setIs] = useState(mutual_follow ? mutual_follow : props.class)
    const render = () => {
        if (is === true) {
            return <Button plain size="mini" onClick={click} type="default">互相关注</Button>
        } else if (is === 0) {
            return <Button plain size="mini" onClick={click} type="default">已关注</Button>
        } else {
            return <Button size="mini" onClick={click} type="danger">关注</Button>
        }
    }
    const click = async () => {
        try {
            if (is === true || is === 0) {
                await deleteFollowed(id)
                if (is === true) {
                    setIs(1)
                } else {
                    setIs(2)
                }
            } else {
                await followedUser(id)
                if (is === 1) {
                    setIs(true)
                } else {
                    setIs(0)
                }
            }
            Toast.success("操作成功")
        } catch (error) {
            Toast.fail('操作失败')
        }
    }
    return (
        <div className={styles.item}>
            <div className={styles.left}>
                <img src={photo} alt="" />
                <div className={styles.name}>
                    <div> {name}</div>
                    <div>粉丝数:{fans_count}</div>
                </div>
            </div>
            {render()}
        </div>
    )
}